feat(circuit-ui): Callout component#3733
Open
matoous wants to merge 2 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 48a0a68 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
matoous
force-pushed
the
md/callout-component
branch
from
6c51f79 to
6e9d93f
Compare
Contributor
|
Size Change: +721 B (+0.09%) Total Size: 837 kB 📦 View Changed
ℹ️ View Unchanged
|
matoous
force-pushed
the
md/callout-component
branch
from
6e9d93f to
537ad78
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3733 +/- ##
==========================================
+ Coverage 93.48% 93.49% +0.01%
==========================================
Files 201 202 +1
Lines 4540 4547 +7
Branches 1780 1782 +2
==========================================
+ Hits 4244 4251 +7
Misses 267 267
Partials 29 29
🚀 New features to boost your workflow:
|
matoous
force-pushed
the
md/callout-component
branch
from
537ad78 to
d36567c
Compare
matoous
force-pushed
the
md/callout-component
branch
from
d36567c to
36dc335
Compare
matoous
force-pushed
the
md/callout-component
branch
from
36dc335 to
c17579b
Compare
matoous
force-pushed
the
md/callout-component
branch
from
c17579b to
c6dfb44
Compare
matoous
commented
Jul 1, 2026
Contributor
Author
There was a problem hiding this comment.
note: mostly adopted for InlineNotification.
matoous
force-pushed
the
md/callout-component
branch
from
c6dfb44 to
dcb2fe7
Compare
matoous
force-pushed
the
md/callout-component
branch
from
dcb2fe7 to
c324245
Compare
sirineJ
reviewed
Jul 3, 2026
| <Icon aria-hidden="true" size="24" /> | ||
| </div> | ||
| <span className={utilClasses.hideVisually}>{iconLabel}</span> | ||
| <Body as="div" className={classes.content}> |
Contributor
Author
There was a problem hiding this comment.
Because I initially had body as a string (not div and support for arbitrary react nodes) and forgot to fix this when refactoring 🤦 fixed.
| import { Callout, type CalloutProps } from './Callout.js'; | ||
|
|
||
| export default { | ||
| title: 'Components/Callout', |
Contributor
There was a problem hiding this comment.
Suggested change
| title: 'Components/Callout', | |
| title: 'Notifications/Callout', |
Contributor
Author
There was a problem hiding this comment.
This is where I had it initially and then moved it under Components. Given Callout is more meant for a static content, it felt a little out of place under Notifications and I was afraid it might make it easier to use accidentally NotificationInline instead of Callout and vice versa.
I updated it, but let me know what do you thing about the thought above.
sirineJ
reviewed
Jul 8, 2026
|
|
||
| Use callouts to highlight persistent guidance, contextual tips, or extra information that belongs next to related content. | ||
|
|
||
| Keep callout copy concise and static. For semantic feedback to user actions, use [`NotificationInline`](Notifications/NotificationInline). For dismissible content or content with a call to action, use [`NotificationBanner`](Notifications/NotificationBanner). |
Contributor
There was a problem hiding this comment.
Suggested change
| Keep callout copy concise and static. For semantic feedback to user actions, use [`NotificationInline`](Notifications/NotificationInline). For dismissible content or content with a call to action, use [`NotificationBanner`](Notifications/NotificationBanner). | |
| Keep callout copy concise and static. For semantic feedback to user actions, use [`NotificationInline`](Notification/NotificationInline/Docs). For dismissible content or content with a call to action, use [`NotificationBanner`](Notification/NotificationBanner/Docs). |
| import { Callout, type CalloutProps } from './Callout.js'; | ||
|
|
||
| export default { | ||
| title: 'Notifications/Callout', |
Contributor
There was a problem hiding this comment.
Sorry the correct group name is actually Notification and not Notifications. Although I think the plural form is more convinient.
Up to you to rename the group to Notifications or adjust here for Notification :)
Suggested change
| title: 'Notifications/Callout', | |
| title: 'Notification/Callout', |
|
|
||
| Use callouts to highlight persistent guidance, contextual tips, or extra information that belongs next to related content. | ||
|
|
||
| Keep callout copy concise and static. For semantic feedback to user actions, use [`NotificationInline`](Notifications/NotificationInline). For dismissible content or content with a call to action, use [`NotificationBanner`](Notifications/NotificationBanner). |
Contributor
There was a problem hiding this comment.
Suggested change
| Keep callout copy concise and static. For semantic feedback to user actions, use [`NotificationInline`](Notifications/NotificationInline). For dismissible content or content with a call to action, use [`NotificationBanner`](Notifications/NotificationBanner). | |
| Keep callout copy concise and static. For semantic feedback in response to user actions, such as success or error messages, use the [`NotificationInline`](Notifications/NotificationInline) component. For dismissible content or content with a call to action, use the [`NotificationBanner`](Notifications/NotificationBanner) component. |
Comment on lines
+40
to
+44
| info: Info, | ||
| success: Confirm, | ||
| warning: Notify, | ||
| danger: Alert, | ||
| promo: Sparkles, |
Contributor
There was a problem hiding this comment.
Weren't the semantic variants to be removed as per Joao's feedback ?
Comment on lines
+33
to
+35
| ### Links | ||
|
|
||
| The callout body supports links to related content. Avoid placing other interactive content inside a callout. |
Contributor
There was a problem hiding this comment.
Suggested change
| ### Links | |
| The callout body supports links to related content. Avoid placing other interactive content inside a callout. | |
| ### Content | |
| The body of the Callout should be static and purely informational. Keep the content limited to text and links to related resources, and avoid placing other interactive elements such as buttons, form controls, or custom actions. |
|
|
||
| #### Avoid dynamically rendering a callout | ||
|
|
||
| The `Callout` component is meant for static content. If you need to render a message dynamically, you most likely want to use the [`NotificationInline`](Notifications/NotificationInline) component instead. |
Contributor
There was a problem hiding this comment.
This section feels very close to the instructions in the "How to use" section, and is not very related to accessibility. I think we can remove it.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
On text-heavy websites we sometimes want to call out a specific feature, warning, and similar. One example being our developer portal: https://developer.sumup.com/online-payments/testing. This use-case doesn't align well with the existing
InlineNotificationwhich comes the closest in desired style but has different purpose that shouldn't be overloaded.Approach and changes
Adds a new
Calloutcomponent that is close in implementation toInlineNotificationbut:promovarianticonactionRelated (internal Slack thread): https://sumup.slack.com/archives/CURHLN94K/p1782128993767939
Definition of done